<template>
	<view class="container">
		<view class="plate-display-area">
			<view class="plate-number" :class="{ 'blue-plate': plate.length === 7, 'green-plate plate-number-color': plate.length === 8}">
				{{ plate }}
			</view>
		</view>

		<uni-card title="充电信息" class="info-card">
      <view class="info-item">
        <text class="label">充电站</text>
        <text class="value">{{ chargeInfo.stationName }}</text>
      </view>
			<view class="info-item">
				<text class="label">开始时间</text>
				<text class="value">{{ chargeInfo.startTime }}</text>
			</view>
			<view class="info-item">
				<text class="label">充电电量</text>
				<text class="value">{{ chargeInfo.power }} kWh</text>
			</view>
			<view class="info-item">
				<text class="label">充电金额</text>
				<text class="value amount">¥ {{ chargeInfo.amount }}</text>
			</view>
		</uni-card>

		<uni-card title="支付信息" class="info-card">
			<view class="info-item">
				<text class="label">支付时间</text>
				<text class="value">{{ chargeInfo.payTime }}</text>
			</view>
			<view class="info-item">
				<text class="label">优惠金额</text>
				<text class="value discount">-¥ {{ chargeInfo.discount }}</text>
			</view>
			<view class="info-item">
				<text class="label">实付金额</text>
				<text class="value amount">¥ {{ chargeInfo.actualAmount }}</text>
			</view>
		</uni-card>

	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

const plate = ref('');
const chargeInfo = ref({
  stationName: '新宇创谷B座充电站',
	startTime: '2023-10-28 08:00:00',
	power: '30.5',
	amount: '61.00',
	payTime: '2023-10-28 11:15:00',
	discount: '10.00',
	actualAmount: '51.00'
});

onLoad((options) => {
	if (options.id) {
		// a mock to get order detail
		plate.value = '浙A88888';
	}
});

</script>

<style scoped>

.container {
	padding: 20rpx;

	background-color: #f5f5f5;
	height: 100%;
	/* background-color: #ffffff; */
}

.plate-display-area {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 40rpx;
}

.plate-number {
	padding: 20rpx 40rpx;
	border-radius: 20rpx;
	font-size: 88rpx;
	/*font-weight: bold;*/
	color: #fff;
	text-align: center;
	letter-spacing: 5rpx;
}

.plate-number-color{
  color: #000000bf;
}

.blue-plate {
  border: 1px solid #f0f0f0;
	background-color: #007aff;
}

.green-plate {
  border: 1px solid #353535;
  background: linear-gradient(#ffffff3d, #34c759, #28a745);
  /*background-image: linear-gradient(#50fffa69, #ffffff 30%, #ffffff);*/

}

.info-card {
	margin-bottom: 40rpx;
}

.info-item {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 0;
	border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
	border-bottom: none;
}

.label {
	color: #666;
}

.value {
	color: #333;
}

.amount {
	color: #ff3b30;
	font-weight: bold;
  font-size: 24px;
}

.discount {
	color: #67c23a;
	font-weight: bold;
}

</style>